<template>
    <span >
        <el-button-group :style="props.btns.style?props.btns.style:''">
            <slot name="header"></slot>
            <span  v-for="(btn,index) in props.btns" :key="index">
                <slot name="header"></slot>
                <Button :btn="btn" :allBtnPermission="props.allBtnPermission" v-show="props.btns.expansion?expansionVal:true" :style="btn.btnStyle?btn.btnStyle:'margin-left:4px'"/>
                <slot name="footer"> </slot>
            </span>
            <span class="expansion">
                <i class="el-icon-d-arrow-left upIcon" v-show="props.expansionShow&&expansionVal" @click="expansionVal=!expansionVal"></i>
                <i class="el-icon-d-arrow-right upIcon" v-show="props.expansionShow&&!expansionVal" @click="expansionVal=!expansionVal"></i>
            </span>   
            <slot name="rightSlot"></slot>
            <slot name="footer"> </slot>
        </el-button-group> 
    </span>             
</template>
<script  setup>
// import Button from './Button';
const props = defineProps({
    btns:{
        type:Array,
        required:false
    },
    expansionShow:{
        type:Boolean,
        required:false
    },
    allBtnPermission:{
        type:Boolean,
        required:false,
        default:false,
    }
})

// components:{
//     Button,
// }
const expansionVal = ref(false);

</script>
<style  lang="scss" scoped>

.upIcon{
  transform: rotate(90deg);
  cursor: pointer;
  &.large{
    font-size: 20px;
  }
}
.icon{
  cursor: pointer;
}
.expansion{
    float: right;
    margin-right: 10px;
}

</style>






























